import React, { useEffect } from "react"
import { Link } from "react-router-dom"
import { getUser } from "../../store/actions"
import { Icon } from "../../components/Icon"
import { useDispatch, useSelector } from "react-redux"
import "./index.scss"
import { RightOutline } from "antd-mobile-icons"
function My() {
  const dispatch = useDispatch()
  const profile = useSelector((state) => state.user)
  const { user } = profile
  const { photo, name, art_count, follow_count, fans_count, like_count } = user
  // 获取个人信息
  useEffect(() => {
    dispatch(getUser())
  }, [dispatch])
  return (
    <div className="root">
      <div className="profile">
        {/* 个人信息 */}
        <div className="user-info">
          <div className="avatar">
            <img
              src={photo || "http://toutiao.itheima.net/images/user_head.jpg"}
              alt=""
            />
          </div>
          <div className="user-name">{name}</div>
          <Link to="/profile/edit" className="userMes">
            个人信息
            <RightOutline color="#fff" />
          </Link>
        </div>

        {/* 今日阅读 */}
        {/* <div className="read-info">
          <Icon type="iconbtn_readingtime" />
          今日阅读
          <span>10</span>
          分钟
        </div> */}

        {/* 动态 - 对应的这一行 */}
        <div className="count-list">
          <div className="count-item">
            <Link to="/user/dynamic">
              <p>{art_count}</p>
              <p>动态</p>
            </Link>
          </div>
          <div className="count-item">
            <Link to={"/user/follow/follow"}>
              <p>{follow_count}</p>
              <p>关注</p>
            </Link>
          </div>
          <div className="count-item">
            <Link to={"/user/follow/fans"}>
              <p>{fans_count}</p>
              <p>粉丝</p>
            </Link>
          </div>
          <div className="count-item">
            <p>{like_count}</p>
            <p>被赞</p>
          </div>
        </div>

        {/* 消息通知 - 对应的这一行 */}
        <div className="user-links">
          <div className="link-item">
            <Icon type="iconbtn_mymessages" />
            <div>消息通知</div>
          </div>
          <div className="link-item">
            <Link to="/user/collect">
              <Icon type="iconbtn_mycollect" />
              <div>收藏</div>
            </Link>
          </div>
          <div className="link-item">
            <Link to="/user/history">
              <Icon type="iconbtn_history1" />
              <div>浏览历史</div>
            </Link>
          </div>
          <div className="link-item">
            <Icon type="iconbtn_myworks" />
            <div>我的作品</div>
          </div>
        </div>
      </div>

      {/* 更多服务 */}
      <div className="more-service">
        <h3>更多服务</h3>
        <div className="service-list">
          <div className="service-item">
            <Link to="/user/feedback">
              <Icon type="iconbtn_feedback" />
              <div>用户反馈</div>
            </Link>
          </div>
          {/* onClick={() => history.push("/chat")} */}
          <div className="service-item">
            <Link to="/intellect">
              <Icon type="iconbtn_xiaozhitongxue" />
              <div>小智同学</div>
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}

export default My
